<template>
	<view class="contentBox">
		<!-- 固定的按钮 -->
		<view class="NavBar"
			:style="{'paddingTop':topHight +'rpx','height':topHight+130 +'rpx','backgroundColor':'rgba(255, 255, 255,'+num+')'}">
			<view class="flex isBtn" @click="goBack">
				<fui-icon name="arrowleft" color="#FFF" :size="40"></fui-icon>
			</view>
			<!-- 			<view class="isBtn">
				新访客
			</view> -->
		</view>
		<!-- 背景图片 -->
		<view class="backImage">
			<image src="/static/test/userheader.jpg" mode="aspectFill" alt="" />
			<view class="infoBox flex" :style="{'top':topHight+130 +'rpx',}">
				<view class="avatar flex">
					<image src="/static/test/userheader.jpg" mode="widthFix"></image>
				</view>
				<view style="margin-left:20rpx">
					<view style="font-size:48rpx; color: white;font-weight: 700;">柏拉图</view>
					<view style="font-size:28rpx;color: rgba(255, 255, 255, 0.8);">绽放号：305830580</view>
				</view>
			</view>
		</view>

		<!-- 数据以及列表 -->
		<view class="msgBox">
			<!-- 获赞等数据 -->
			<view style="padding: 0rpx  20rpx;justify-content: space-between;" class="flex">
				<view style="display:flex;width: 75%;align-items: center;">
					<view style="text-align:center;margin-right: 60rpx;">
						<view class="numBox">242</view>
						<view class="textBox">获赞</view>
					</view>
					<view style="text-align:center;margin-right: 60rpx;">
						<view class="numBox">242</view>
						<view class="textBox">获赞</view>
					</view>
					<view style="text-align:center;margin-right: 60rpx;">
						<view class="numBox">242</view>
						<view class="textBox">获赞</view>
					</view>
					<view style="text-align:center;margin-right: 60rpx;">
						<view class="numBox">242</view>
						<view class="textBox">获赞</view>
					</view>
				</view>

			</view>
			<!-- 个人简介 -->
			<view class="introduction">
				<!-- 、个人简介 -->
				<view class="introduce">
					点击添加介绍，让大家认识你...
				</view>
				<!-- 个人标签性别 -->
				<view class="flex">
					<view class="labelBox">
						男22岁
					</view>
					<view class="labelBox">
						河北·保定
					</view>
				</view>
				<view class="" style="width: 100%;padding-top: 20rpx;">
					<fui-button type="danger"><text style="font-weight: 800;font-size: 32rpx;">+</text>关注</fui-button>

				</view>

			</view>
			<!-- tab切换 -->
			<fui-sticky @sticky="onSticky" :scrollTop="scrollTop" :top="topHight+130">
				<view class="tabsBox">
					<fui-tabs :tabs="tabs" @change="tabChange" :current="tabIndex" selectedColor="#000" :short="false"
						background="none" isDot scroll alignLeft />
				</view>
			</fui-sticky>
			<!-- 列表 -->
			<view class="indexbody">
				<swiper :current="tabIndex" :duration="300" @change="tabChange" style="height: 100%;">
					<swiper-item class="fui-swiper__item">
						<scroll-view :scroll-y="sticky" :show-scrollbar="false" class="swiper">
							<DisplayList></DisplayList>
						</scroll-view>
					</swiper-item>
					<swiper-item class="fui-swiper__item">
						<scroll-view :scroll-y="sticky" :show-scrollbar="false" class="swiper">
							<!-- 动态 -->
							<DynamicList :list="dynamicList"></DynamicList>
						</scroll-view>
					</swiper-item>
					<swiper-item>
						<scroll-view scroll-y :show-scrollbar="false" class="swiper">
							<view style="padding:20rpx;">动态</view>
						</scroll-view>
					</swiper-item>
					<swiper-item>
						<scroll-view scroll-y :show-scrollbar="false" class="swiper">
							<view style="padding:20rpx;">任务</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import DisplayList from '@/myPages/compoents/DisplayList.vue'
	import DynamicList from '@/publicPages/dynamic/list.vue'
	export default {
		components: {
			DynamicList,
			DisplayList
		},
		data() {
			return {
				sticky: false,

				num: 0,
				topHight: 0,
				scrollTop: 0,
				stickyTop: 0,
				tabIndex: 0,
				//数据格式二：name（必选）、badge（可选）、disabled（可选）为约定属性，其他属性可自行定义
				tabs: [{
					//标签显示文本（String）
					name: '推荐'
				}, {
					name: '动态'
				}, {
					name: '作品',
					//角标（Number | String | Boolean），大于0的数或字符串则显示
					//isDot为true时可传true或false
					badge: 1
				}, {
					name: '任务'
				}, {
					name: '活动'
				}, {
					name: '通告'
				}, {
					name: '约单'
				}, {
					name: '模卡',
					//是否禁用当前项（Boolean）
					disabled: true
				}, {
					name: '标签九'
				}]

			};
		},
		onPageScroll(e) {

			this.num = e.scrollTop / 200
			this.scrollTop = e.scrollTop
		},
		mounted() {
			let app = uni.getSystemInfoSync()
			this.topHight = app.statusBarHeight
		},
		onShow() {
			if (uni.getStorageSync("isLogin")) {
				this.isLogin = true
			} else {
				this.isLogin = false
			}
			console.log('是否登录', this.isLogin);
		},

		methods: {
			goBack() {
				uni.navigateBack({
					fail() {
						uni.switchTab({
							url: '/pages/index/index'
						});
					},
				})
			},
			// 去登录
			toLogin() {
				uni.navigateTo({
					url: '/login/weixinlogin'
				});
			},
			toEdit() {
				uni.navigateTo({
					url: '/myPages/EditHomePage'
				});
			},
			getHeight(e) {
				this.stickyTop = e.height * 2

			},
			onSticky(e) {
				this.sticky = e.isFixed
			},
			tabChange(e) {
				if (e.name) {
					this.switchTab(e.index);
				} else {
					if (e.detail.source == 'touch') {
						let index = e.target.current || e.detail.current;
						this.switchTab(index);
					}
				}

			},
			switchTab(index) {
				if (this.tabIndex === index) return;
				this.tabIndex = index;
			},
		}
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.introduce {
		color: #949494;
		padding: 10rpx 0rpx;
		font-size: 26rpx;
	}

	.labelBox {
		color: #4B4B4B;
		font-size: 24rpx;
		padding: 8rpx 12rpx;
		background-color: #F4F2F3;
		margin-right: 10rpx;
		border-radius: 8rpx;
	}

	.introduction {
		padding: 40rpx 20rpx;
	}

	.numBox {
		font-weight: 700;
		font-size: 30rpx;
	}

	.editBtn {

		width: 25%;

		view {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			font-weight: 700;
			color: #000;
			border-radius: 10rpx;
			padding: 15rpx 20rpx;
			background-color: #F3F3F3;

		}

	}

	.textBox {
		color: #333;
		font-size: 26rpx;
	}

	.isBtn {
		width: 70rpx;
		height: 70rpx;
		justify-content: center;
		background: rgba(0, 0, 0, 0.5);
		color: #FFF;
		border-radius: 100%;
		font-size: 24rpx;
		text-align: center;
		margin-right: 20rpx;
	}

	.avatar {
		background-color: white;
		justify-content: center;
		width: 180rpx;
		height: 180rpx;
		border-radius: 100%;

		image {
			width: 95% !important;
			height: 95% !important;
			border-radius: 100%;
		}
	}

	.infoBox {
		padding: 50rpx 20rpx;
		width: 100%;
		position: absolute;
		left: 0;

	}

	.msgBox {
		display: flex;
		flex-direction: column;
		height: 130vh;
		position: relative;
		top: -40rpx;
		padding-top: 20rpx;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		background-color: white;
	}

	.indexbody {
		flex: 1;
	}

	.sink {
		height: 100rpx;
		width: 100%;
	}

	.NavBar {
		padding: 5rpx 20rpx;
		z-index: 22;
		width: 100%;
		position: fixed;
		display: flex;
		align-items: flex-end;

	}

	.backImage {
		position: relative;
		width: 100%;

		image {
			width: 100%;
		}
	}

	.contentBox {
		position: relative;
		min-height: 100vh;
		width: 100vw;
		background-color: #FFF;
	}

	.fui-swiper__item {
		height: 100%;
	}

	.swiper {
		height: 100%;
	}

	.tabsBox {
		background-color: white;
	}
</style>